
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _tab = _interopRequireDefault(require('../tab'));

const _tabs = _interopRequireDefault(require('../tabs'));

const _field = _interopRequireDefault(require('../field'));

const _button = _interopRequireDefault(require('../button'));

const _coupon = _interopRequireDefault(require('../coupon'));

// Utils
// Components
const _createNamespace = (0, _utils.createNamespace)('coupon-list');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];
const t = _createNamespace[2];

const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';

const _default2 = createComponent({
  model: {
    prop: 'code',
  },
  props: {
    code: String,
    closeButtonText: String,
    inputPlaceholder: String,
    enabledTitle: String,
    disabledTitle: String,
    exchangeButtonText: String,
    exchangeButtonLoading: Boolean,
    exchangeButtonDisabled: Boolean,
    exchangeMinLength: {
      type: Number,
      default: 1,
    },
    chosenCoupon: {
      type: Number,
      default: -1,
    },
    coupons: {
      type: Array,
      default: function _default() {
        return [];
      },
    },
    disabledCoupons: {
      type: Array,
      default: function _default() {
        return [];
      },
    },
    displayedCouponIndex: {
      type: Number,
      default: -1,
    },
    showExchangeBar: {
      type: Boolean,
      default: true,
    },
    showCloseButton: {
      type: Boolean,
      default: true,
    },
    showCount: {
      type: Boolean,
      default: true,
    },
    currency: {
      type: String,
      default: '¥',
    },
    emptyImage: {
      type: String,
      default: EMPTY_IMAGE,
    },
  },
  data: function data() {
    return {
      tab: 0,
      winHeight: window.innerHeight,
      currentCode: this.code || '',
    };
  },
  computed: {
    buttonDisabled: function buttonDisabled() {
      return !this.exchangeButtonLoading && (this.exchangeButtonDisabled || !this.currentCode || this.currentCode.length < this.exchangeMinLength);
    },
    listStyle: function listStyle() {
      return {
        height: `${this.winHeight - (this.showExchangeBar ? 140 : 94)}px`,
      };
    },
  },
  watch: {
    code: function code(_code) {
      this.currentCode = _code;
    },
    currentCode: function currentCode(code) {
      this.$emit('input', code);
    },
    displayedCouponIndex: 'scrollToShowCoupon',
  },
  mounted: function mounted() {
    this.scrollToShowCoupon(this.displayedCouponIndex);
  },
  methods: {
    onClickExchangeButton: function onClickExchangeButton() {
      this.$emit('exchange', this.currentCode); // auto clear currentCode when not use vModel

      if (!this.code) {
        this.currentCode = '';
      }
    },
    // scroll to show specific coupon
    scrollToShowCoupon: function scrollToShowCoupon(index) {
      const _this = this;

      if (index === -1) {
        return;
      }

      this.$nextTick(() => {
        const _this$$refs = _this.$refs;
        const { card } = _this$$refs;
        const { list } = _this$$refs;
        /* istanbul ignore next */

        if (list && card && card[index]) {
          list.scrollTop = card[index].$el.offsetTop - 100;
        }
      });
    },
    genEmpty: function genEmpty() {
      const h = this.$createElement;
      return h('div', {
        class: bem('empty'),
      }, [h('img', {
        attrs: {
          src: this.emptyImage,
        },
      }), h('p', [t('empty')])]);
    },
    genExchangeButton: function genExchangeButton() {
      const h = this.$createElement;
      return h(_button.default, {
        attrs: {
          plain: true,
          type: 'danger',
          text: this.exchangeButtonText || t('exchange'),
          loading: this.exchangeButtonLoading,
          disabled: this.buttonDisabled,
        },
        class: bem('exchange'),
        on: {
          click: this.onClickExchangeButton,
        },
      });
    },
  },
  render: function render() {
    const _this2 = this;

    const h = arguments[0];
    const { coupons } = this;
    const { disabledCoupons } = this;
    const count = this.showCount ? ` (${coupons.length})` : '';
    const title = (this.enabledTitle || t('enable')) + count;
    const disabledCount = this.showCount ? ` (${disabledCoupons.length})` : '';
    const disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
    const ExchangeBar = this.showExchangeBar && h('div', {
      class: bem('exchange-bar'),
    }, [h(_field.default, {
      attrs: {
        clearable: true,
        border: false,
        placeholder: this.inputPlaceholder || t('placeholder'),
        maxlength: '20',
      },
      class: bem('field'),
      model: {
        value: _this2.currentCode,
        callback: function callback($$v) {
          _this2.currentCode = $$v;
        },
      },
    }), this.genExchangeButton()]);

    const onChange = function onChange(index) {
      return function () {
        return _this2.$emit('change', index);
      };
    };

    const CouponTab = h(_tab.default, {
      attrs: {
        title,
      },
    }, [h('div', {
      class: bem('list', {
        'with-bottom': this.showCloseButton,
      }),
      style: this.listStyle,
    }, [coupons.map((coupon, index) => h(_coupon.default, {
      ref: 'card',
      key: coupon.id,
      attrs: {
        coupon,
        currency: _this2.currency,
        chosen: index === _this2.chosenCoupon,
      },
      nativeOn: {
        click: onChange(index),
      },
    })), !coupons.length && this.genEmpty()])]);
    const DisabledCouponTab = h(_tab.default, {
      attrs: {
        title: disabledTitle,
      },
    }, [h('div', {
      class: bem('list', {
        'with-bottom': this.showCloseButton,
      }),
      style: this.listStyle,
    }, [disabledCoupons.map((coupon) => h(_coupon.default, {
      attrs: {
        disabled: true,
        coupon,
        currency: _this2.currency,
      },
      key: coupon.id,
    })), !disabledCoupons.length && this.genEmpty()])]);
    return h('div', {
      class: bem(),
    }, [ExchangeBar, h(_tabs.default, {
      class: bem('tab'),
      attrs: {
        border: false,
      },
      model: {
        value: _this2.tab,
        callback: function callback($$v) {
          _this2.tab = $$v;
        },
      },
    }, [CouponTab, DisabledCouponTab]), h('div', {
      class: bem('bottom'),
    }, [h(_button.default, {
      directives: [{
        name: 'show',
        value: this.showCloseButton,
      }],
      attrs: {
        round: true,
        type: 'danger',
        block: true,
        text: this.closeButtonText || t('close'),
      },
      class: bem('close'),
      on: {
        click: onChange(-1),
      },
    })])]);
  },
});

exports.default = _default2;
